<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
    <link href="css/base.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/cart.css"/>
    <style>
        .header{
            background-image: url("image/headerbackground.jpg");
            padding: 20px 0px;
            border-bottom: 1px solid #999999;
        }
        .nav{
            background: url("image/loge.jpg") no-repeat 0px 0px;
        }
        .nav>p{
            text-align: right;
            margin-right: 20px;
        }
        .nav>p:nth-of-type(2){
            text-align: left;
            margin-left: 200px;
            font-size: 25px;
            font-family: 华文行楷;
        }
        .main{
            margin: 20px 0px;
        }
        hr{
            color: #563F2F;
            margin-bottom: 20px;
        }
        .footer{
            color: #333333;
            margin-bottom: 100px;
        }
        .container{
            overflow: hidden;
        }
        .footer p{
            float: left;
        }
        .footer ul li{
            float: right;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function(){
        	loadShoppingCarlist();
            $(".check-all").click(function(){
                if(this.checked){
                    $(".check").prop("checked",true);
                }else{
                    $(".check").prop("checked",false);
                }
                getTotal();
            })
            $("#deleteAll").click(function(){
				$.post("cartedit",{id:0},function(){
					loadShoppingCarlist();             	
				})
                getTotal();
            })
            $("tbody").on("click",".check-one",function(){
            	 if(this.checked){
                     $(this).prop("checked",true);
                 }else{
                     $(this).prop("checked",false);
                 }
                 getTotal();  
            })
            $("tbody").on("click",".add",function(){
            	var temp=parseInt($(this).prev().val());
                var total=0;
                temp++;
                $(this).prev("input").attr("value",temp);
                total=temp*parseFloat( $(this).parent().prev(".price").text());
                $(this).parent().next().text(total);
                getTotal();

                $.post("cartedit",{cid:$(this).next().val(),count:$(this).prev().val()},function(){
                	
                })
            })
         	
            $("tbody").on("click",".reduce",function(){
            	var temp=parseInt($(this).next().val());
                var total=0;
                if(temp>1){
                    temp--;
                    $(this).next("input").attr("value",temp);
                    total=temp*parseFloat( $(this).parent().prev(".price").text());
                    $(this).parent().next().text(total);
                }
                getTotal();
                $.post("cartedit",{cid:$(this).next().next().next().val(),count:$(this).next().val()},function(){
            	})
            })
            $("body").on("click",".del",function(){
            	
          		 $.post("cartedit",{did:$(this).next().val()},function(){
            		loadShoppingCarlist();
            	})
            })   
        })
        
        function getTotal(){
            var total = 0;

            $(".subtotal").each(function(){
                if($(this).parents("tr").first().find("input").prop("checked")){
                    total += parseFloat($(this).text());

                }
            })
            
            $("#priceTotal").text(total.toFixed(2));
            $("#totalPrice").val($("#priceTotal").text());
            var sum = 0;
            $(".count-input").each(function(){
                if($(this).parents("tr").first().find("input").prop("checked")){
                    sum += parseInt($(this).val());
                }
            })
            $("#selectedTotal").text(sum);
        }
        function loadShoppingCarlist(){
        	$.getJSON("cartlist",function(json){
        		$("#cartlist").empty();
        		for(var i=0; i<json.length; i++){
        			var c=json[i];
        			var line="<tr>"+
                        "<td class='checkbox'><input class='check-one check' type='checkbox' name='cid' value="+c.id+"></td>"+
                        "<td class='goods'><img src='image/productImg/"+c.mainimg+"' alt=''/><span>"+c.name+" </span></td>"+
                        "<td class='price'>"+c.price+"</td>"+
                        "<td class='count'><span class='reduce'>-</span>"+
                            "<input class='count-input' type='text' value="+c.count+">"+
                            "<span class='add'>+</span>"+
                            "<input type='hidden'  value="+c.id+"></td>"+
                        "<td class='subtotal'>"+c.price*c.count+"</td>"+
                        "<td class='operation'>"+
                        	"<span class='del'>删除</span>"+
                        	"<input type='hidden' value="+c.id+"></td></tr>";
                    $("#cartlist").append(line);
        		}
        	})
        }    
    </script>
</head>
<body>
<div class="both">
    <div class="header">
        <div class="container">
             <div class="nav">
                <p>
                    <c:if test="${LoginUser==null}">
                    <a href="login.html" >登陆</a>&nbsp;&nbsp;
                    </c:if>
                    <c:if test="${LoginUser!=null}">
                    <a>${LoginUser.userName},欢迎你！</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="cart.html">我的购物车</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="login.html?out=t">注销</a>&nbsp;&nbsp;
                    </c:if>
                    |&nbsp;&nbsp;
                    <a href="register.html" >注册</a>
                </p>
                <p>|&nbsp;符合人类进步的食品</p>
                <p>
                    <a href="index.html">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="productList.html">蛋糕名录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="user.html">用户中心</a>
                </p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="catbox" style="color: #92735F">
                <h2>我的购物车</h2>
                <form action="handonorder.html" method="get" >
                <table id="cartTable">
                    <thead>
                    <tr>
                        <th><label>
                            <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th class="del">操作</th>
                    </tr>
                    </thead>
                    <tbody id="cartlist">                                   
                    </tbody>
                </table>
                <div class="foot" id="foot"  style="color: #92735F">
                    <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
                    <div class="fl delete operation"><span id="deleteAll">删除</span></div>
                    <input type="hidden" id="cartTotalPrice" />
                    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
                    <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
                    <div class="selected-view">
                        <div id="selectedViewList" class="clearfix">
                            <div><span>取消选择</span></div>
                        </div>
                        <span class="arrow">◆<span>◆</span></span> </div>
                </div>
                <div style="float:right;">
                    <input type="hidden" name="totalPrice" id="totalPrice" value=""/>
                    <button type="button" style="color:#412710;background-color: #F8F6F7;;width: 150px;height: 50px; font-size: 20px; border: 1px solid #F7F7F7"><a href="productList.html" style="color:#412710;background-color: #F8F6F7;;width: 150px;height: 50px; font-size: 20px; border: 1px solid #F7F7F7">继续购物</a></button>
                    <button onclick="getTotal() " style="color: #ffffff; width: 150px;height: 50px; font-size: 20px; border: 1px solid #F7F7F7;background-color: #491903 ;">提交订单</button>
                </div>
                </form>
                <!--<div class="fr closing" onclick="getTotal() " style="width: 150px;height: 50px; font-size: 20px; border: 1px solid #F7F7F7">结 算</div>-->
                <!--<div class="fr closing" style="width: 150px;height: 50px; font-size: 20px;border: 1px solid #F7F7F7">继续购物</div>-->
            </div>
        </div>
    </div>
    <div class="footer">
        <hr>
        <div class="container">
            <div>
                <p>©2005-2014&nbsp;21Cake官网版权所有，并保留所有权利</p>
                <ul>
                    <li><a href="#">联系我们</a> &nbsp;</li>
                    <li><a href="#">售后流程</a> &nbsp;</li>
                    <li><a href="#">订购方式</a> &nbsp;</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
